import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { requiredPngImg, timePngImg } from '.';
import { toJS } from 'mobx';
import jQuery from "jquery"
import { DatePicker, List } from 'weaver-mobile';

let dateInstance;
export default class WeaTimePickerCellType extends window.GC.Spread.Sheets.CellTypes.Text {
    typeName = 'WeaTimePickerCellType';
    viewAttr = 2;
    label;
    clickwidth;
    width;
    paint(ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }
        super.paint(ctx, value, x, y, w, h, style, context);
        ctx.save();
        // const width = Math.min(16, h);
        // ctx.drawImage(timePngImg, x + w - width, y + (h - width) / 2, width, width);
        
        const width = Math.min(16, h);
        this.width = width;
        if (this.viewAttr == 3) {
            if (value) {
                this.clickwidth = width;

                ctx.drawImage(timePngImg, x + w - width, y + (h - width) / 2, width, width);
            } else {
                this.clickwidth = width + 9;

                ctx.drawImage(timePngImg, x + w - this.clickwidth, y + (h - width) / 2, width, width);
                ctx.drawImage(requiredPngImg, x + w - 8, y + (h - 7) / 2, 7, 7);
            }

        } else if(this.viewAttr == 2){
            this.clickwidth = width;

            ctx.drawImage(timePngImg, x + w - width, y + (h - width) / 2, width, width);
        }
        ctx.restore();
    }
    /*   createEditorElement(context) {
         return this.createBrowserElement(context);
     }
      deactivateEditor(editorContext, context) {
 
     } */
    doUpdateValue = () => {

    }
    updateEditor(editorContext, cellStyle, cellRect, context) {
        editorContext.style.height = `${cellRect.height}px`;
        editorContext.style.width = `${cellRect.width}px`;
    }
    focus(editorContext, context) {
        // a
    }
    fromJSON(setting) {
        this.fieldType = toJS(setting.fieldType);
        this.viewAttr = setting.viewAttr;
        this.label = setting.label;
    }

    getHitInfo(x, y, cellStyle, cellRect, context) {
        const { row, col, sheetArea, sheet } = context;
        return {
            x,
            y,
            row,
            col,
            cellRect,
            sheetArea,
            sheet,
        };
    }

    processMouseUp(hitInfo) {
        // 只读 不展示
        if (this.viewAttr && this.viewAttr == 1) {
            return;
        }
        const { x, y, cellRect, sheet, row, col, sheetArea, reservedLocation, isReservedLocation } = hitInfo;
        if (x && cellRect) {
            const cell = sheet.getCell(row, col);
            this.clickwidth = this.width;
            if (cell.value()) {

            } else {
                if(this.viewAttr == 3) {
                    this.clickwidth = this.width + 9;
                }
            }
            if (x >= cellRect.x + cellRect.width - this.clickwidth) {
                const host = sheet.getParent().getHost();
                const offset = jQuery(host).offset();
                this.showTimePicker(cellRect.x + offset.left, cellRect.y + offset.top,sheet.getCell(row, col));
            }
            return true;
        }
        return super.processMouseUp(hitInfo);
    }

    showTimePicker = (left, top, range) => {
        this.createBrowserElement(range);
        this.showBrowserModal(left, top);
    }
    createBrowserElement = (context) => {
        const { sheet, row, col } = context;
        const value = sheet.getCell(row, col).value();
        //const editor = document.createElement('div');
        ReactDOM.render(<DatePicker
            ref={(ref) => dateInstance = ref}
            onChange={this.changeValue.bind(this, context)}
            value={value}
            //formatter={this.formatter}
            mode={'time'}
            showtime={this.showtime}
        />, document.getElementById('dateDiv'));
        //return editor;
    }
    changeValue = (context, value) => {
        const { sheet, row, col } = context;
        sheet.getCell(row, col).value(value)
    }
    showBrowserModal(left, top) {
        setTimeout(() => {
            if (dateInstance) {
                console.log(dateInstance,"dateInstance")
                //dateInstance.fixedPosition(left, top);
                dateInstance.onVisibleChange(true);
            } else {
                this.showBrowserModal(left, top);
            }
        }, 50);
    }
}